﻿@page "/counter"
@using MaBlaApp.Data
@inject IJSRuntime JSRuntime
@inject WeatherForecastService ForecastService

<h3>天气温度图表</h3>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id=@weatherChartId style="width:100%;height:400px;"></div>

@code {

    public readonly string weatherChartId = "weatherChartId";

    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }

    //获取天气温度数据
    private object GetDailyWeather()
    {
        var days = forecasts.Select(x => $"{x.Date:M}").ToArray();
        var temperatures = forecasts.Select(x => x.TemperatureC).ToArray();
        var dailyWeather = new
        {
            Days = days,
            Temperatures = temperatures,
        };

        return dailyWeather;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
            return;

        //等到网页渲染完成之后，再初始化ECharts绘图
        try
        {
            //获取天气温度数据
            var dailyWeather = GetDailyWeather();

            //绘制天气温度图表
            await JSRuntime.InvokeVoidAsync("weatherWin.DrawCharts", weatherChartId, dailyWeather);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"天气温度绘图错误, {ex}");
        }
    }
}